<template>
	<view class="dialog full-screen flex-r" ref="dialog" v-if="show">
		<!-- 提醒领取优惠券 未领取 -->
		<view class="dialog-popup flex-c ac bounceout">
			<view class="popup-body flex-c ac">
				<view class="pop-title flex-r ac jc thinborder">
					<text>温馨提示</text>
				</view>
				<view class="pop-content flex-c ac thinborder">
					<text class="content-text text-secondary">尊敬的用户：您好！\n1、新用户在APP内解锁即可享受5折优惠活动！</text>
					<image
						class="couponimg mt20" 
						src="@/public/images/other/yhq-ys.png" 
						mode="widthFix"
						v-for="item in 3" :key="item"
					></image>
					<text class="content-text text-secondary mt20">2、老用户在APP端“我的”板块中领取优惠券！享受优惠活动价！</text>
				</view>
				<button class="pop-button flex-r ac jc" @tap="downApp">
					<text class="text-large color-primary">前往下载彩虹体育APP</text>
				</button>
			</view>
			<view class="popup-close flex-c" @tap="closeDialog">
				<image class="close-icon" src="@/public/images/other/qdqxan.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "ShowDialog",
		emits: ['close'],
		props: {
			popupData: {
				type: [Array,Object],
				default: ()=>[]
			}
		},
		data() {
			return {
				show: true, //是否显示弹窗
			};
		},
		deactivated() {
			console.log('deactivated');
			//移除动画效果
			if(this.$refs.dialog?.$children[0]){
				this.$refs.dialog.$children[0].$el.classList.remove('bounceout')
			}
		},
		methods: {
			downApp() {
				this.$CHS.downApp()
			},
			closeDialog() {
				this.show = false
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dialog{
		align-items: center;
		justify-content: center;
		touch-action: none;
		&.full-screen{
			z-index: 999;
			width: 100%;
			margin: $pc-margin;
			overflow-y: auto;
			.dialog-popup{
				.popup-body{
					width: 660rpx;
					background-color: #FFFFFF;
					border-radius: 20rpx;
					.pop-title{
						width: 100%;
						font-size: 36rpx;
						font-weight: 500;
						height: 96rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
					}
					.pop-content{
						padding: 30rpx 40rpx;
						.content-text{
							align-self: flex-start;
							line-height: 40rpx;
						}
						.couponimg{
							width: 580rpx;
						}
					}
					.pop-button{
						margin: 0;
						padding: 0;
						border: none;
						height: 96rpx;
						width: 100%;
						font-weight: 500;
						background-color: #FFFFFF;
						border-radius: 0rpx 0rpx 20rpx 20rpx;
					}
				}
				.popup-close{
					margin-top: 40rpx;
					.close-icon{
						width: 80rpx;
					}
				}
			}
		}
		.bounceout{
			animation-duration: 0.4s;
			animation-fill-mode: both;
			animation-name: showAnimation;
		}
	}
	@keyframes showAnimation {
		0% {
			opacity: 0;
			transform: scale(0.1);
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>